<template>
    <div class="custom">
        <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

        <el-drawer v-model="visible" direction="rtl" @close="form={}">
            <el-form label-width="80px">
                <el-form-item label="店铺logo">
                    <el-image v-if="form.logo" style="width: 100px; height: 100px" :src="form.logo" fit="fill"/>
                    <el-input placeholder="店铺logo" v-model="form.logo">
                        <template #append>
                            <el-button
                                    @click="()=>{$store.dispatch('upload/show', (datas) => {form.logo = datas[0].src;})}">
                                上传
                            </el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input placeholder="请输入分类名字" v-model="form.name"/>
                </el-form-item>
                <el-form-item label="店铺分类">
                    <el-select v-model="form.cid"
                               placeholder="请选择店铺分类">
                        <template #default>
                            <el-option label="全部" value=""/>
                            <el-option v-for="(select,selectIndex) in (typeList)"
                                       :key="selectIndex" :label="select.label" :value="select.value"/>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="营业时间">
                    <el-time-picker v-model="form.dayStart" placeholder="营业开始时间" format="HH:mm"
                                    value-format="HH:mm"/>
                    <span style="padding: 0 5px">至</span>
                    <el-time-picker v-model="form.dayEnd" placeholder="营业结束时间" format="HH:mm"
                                    value-format="HH:mm"/>

                </el-form-item>
                <el-form-item label="客服电话">
                    <el-input placeholder="请输入客服电话" v-model="form.mobile"/>
                </el-form-item>
                <el-form-item label="地址">
                    <el-cascader style="width: 100%" :options="locationTree" v-model="form.addIds"
                                 :props="{ checkStrictly: false,value:'id',label:'name',children:'list'}" clearable/>
                    <el-input style="margin-top: 15px;" placeholder="详细地址" v-model="form.address"/>
                </el-form-item>
                <el-form-item label="营业执照">
                    <template v-if="form.license">
                        <el-col :span="6" v-for="(img,i) in form.license" :key="img" style="margin-bottom: 10px;">
                            <div style="position: relative;width: 100px; height: 100px">
                                <el-image style="width: 100%; height: 100%" :src="img" fit="fill"/>
                                <div style="position: absolute;z-index: 1;top: 5px;left: 5px">
                                    <el-icon color="#ff0000" style="cursor: pointer" size="25px"
                                             @click="form.license=$api.deleteArray(form.license,i)">
                                        <Delete/>
                                    </el-icon>
                                </div>
                            </div>
                        </el-col>
                    </template>
                    <el-col :span="6" style="margin-bottom: 10px;">
                        <div class="add-image" style="position: relative;width: 100px;height: 100px"
                             @click="()=>{$store.dispatch('upload/show', (datas) => {form.license.push(datas[0].src);})}">
                            <div style="position: absolute; width: 100%;height: 100%">
                                <div class="text" style="    display: flex; width: 100%;height: 100%;justify-content: center; align-items: center;font-size: 14px;
                    background: var(--el-fill-color-light); color: var(--el-text-color-placeholder);vertical-align: middle;border: 2px dashed #cccccc;border-radius: 10px">
                                    上传
                                </div>
                            </div>
                        </div>
                    </el-col>


                </el-form-item>
                <el-form-item label="门头照">
                    <div style="width: 100%">


                        <el-row :gutter="10">
                            <template v-if="form.images">
                                <el-col :span="6" v-for="(img,i) in form.images" :key="img"
                                        style="margin-bottom: 10px;">
                                    <div style="position: relative;width: 100px; height: 100px">
                                        <el-image style="width: 100%; height: 100%" :src="img" fit="fill"/>
                                        <div style="position: absolute;z-index: 1;top: 5px;left: 5px">
                                            <el-icon color="#ff0000" style="cursor: pointer" size="25px"
                                                     @click="form.images=$api.deleteArray(form.images,i)">
                                                <Delete/>
                                            </el-icon>
                                        </div>
                                    </div>
                                </el-col>
                            </template>
                            <el-col :span="6" style="margin-bottom: 10px;">
                                <div class="add-image" style="position: relative;width: 100px;height: 100px"
                                     @click="()=>{$store.dispatch('upload/show', (datas) => {form.images.push(datas[0].src);})}">
                                    <div style="position: absolute; width: 100%;height: 100%">
                                        <div class="text" style="    display: flex; width: 100%;height: 100%;justify-content: center; align-items: center;font-size: 14px;
                    background: var(--el-fill-color-light); color: var(--el-text-color-placeholder);vertical-align: middle;border: 2px dashed #cccccc;border-radius: 10px">
                                            上传
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </el-form-item>
                <el-form-item label="店铺介绍">
                    <el-input placeholder="请输入店铺介绍" :rows="4"
                              type="textarea" v-model="form.body"/>
                </el-form-item>

                <el-form-item>
                    <el-button @click="visible=false">取消</el-button>
                    <el-button type="primary" @click="handlerSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>


        <el-dialog
                v-model="checkDialog" title="审核状态" width="450px" @close="form={}">

            <el-form label-width="80px">
                <el-form-item label="状态">
                    <el-select v-model="form.status">
                        <el-option label="同意" :value="1"/>
                        <el-option label="拒绝" :value="-1"/>
                        <el-option label="待审核" :value="0"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入审核说明"/>
                </el-form-item>

                <el-form-item>
                    <el-button @click="checkDialog=false">取消</el-button>
                    <el-button type="primary" @click="handlerSubmitCheck">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
    components: {TablePage},
    data() {
        return {
            typeList: [],
            query: [
                {
                    type: 'text',
                    label: '店铺名',
                    placeholder: '店铺名搜索',
                    key: 'name'
                }, {
                    type: 'text',
                    label: '手机号',
                    placeholder: '店主手机号搜索',
                    key: 'mobile'
                },
                {
                    type: 'select',
                    label: '店铺分类',
                    placeholder: '请选择店铺分类',
                    key: 'cid',
                    styles: {width: '150px'},
                    options: () => {
                        return this.typeList
                    }
                }, {
                    type: 'select',
                    label: '状态',
                    placeholder: '请选择分类',
                    key: 'status',
                    styles: {width: '150px'},
                    options: [
                        {label: '正常', value: '1'},
                        {label: '等待审核', value: '0'},
                    ],

                }, {
                    type: 'date-picker',
                    label: '入驻时间',
                    placeholder: '请选择时间',
                    key: 'time'
                }
            ],
            columns: [
                {
                    label: '类型',
                    type: 'render',
                    width: '100px',
                    render: (data) => {
                        if (data.type == 10) return `<span style="color: #ffbd0d">店铺编辑</span>`
                        else return `<span style="color: #f3074e">开店入驻</span>`
                    },
                }, {
                    label: '店铺名字',
                    prop: 'name',
                    width: '180px'
                }, {
                    label: '排序',
                    prop: 'sort',
                    width: '80px'
                }, {
                    label: '店铺logo',
                    type: 'render',
                    width: '180px',
                    render: (data) => {
                        return `<img style="width:64px;height: 64px" src="${data.logo}"/>`;
                    },
                }, {
                    label: '所属分类',
                    prop: 'typeName',
                    width: '180px'
                }, {
                    label: '营业时间',
                    type: 'render',
                    width: '180px',
                    render: (data) => {
                        return `${data.dayStart}至${data.dayEnd}`
                    }
                }, {
                    label: '店主',
                    prop: 'typeName',
                    width: '180px',
                    type: 'render',
                    render: (data) => {
                        if (!data.user) return ''
                        return `<div>
                        <p>手机号:${data.user.mobile}</p>
                        <p>昵称:${data.user.nickname}</p>
                </div>`
                    }
                }, {
                    label: '状态',
                    prop: 'typeName',
                    type: 'render',
                    width: '80px',
                    render: (data) => {
                        if (data.status == 0) return `<span style="color: #ffbd0d">待审核</span>`
                        else if (data.status == 1) return `<span style="color: #118f0d">正常</span>`
                        else if (data.status == -1) return `<span style="color: #f82020">驳回</span>`
                        else return data.status
                    }
                }, {
                    label: '入驻时间',
                    width: '180px',
                    prop: 'created',
                    type: 'date'
                }, {
                    label: '地址',
                    width: '280px',
                    type: 'render',
                    render: (data) => {
                        return (data.stateName || '') + (data.cityName || '') + (data.districtName || '') + data.address
                    }
                }, {
                    label: '操作',
                    type: 'buttons',
                    width: '250px',
                    buttons: [
                        {
                            label: '编辑',
                            type: 'primary',
                            styles: {},
                            icon: 'Edit',
                            callback: (data) => {
                                data.addIds = [data.stateId, data.cityId, data.districtId]
                                this.form = data;
                                this.visible = true;
                            }
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            styles: {},
                            icon: 'Delete',
                            callback: this.handlerDelete,
                        },
                        {
                            label: '审核',
                            type: 'success',
                            styles: {},
                            icon: 'Check',
                            callback: this.handlerCheckShop,
                            hidden: (data) => {
                                return data.status != 0;
                            }
                        }, {
                            label: '排序',
                            type: 'primary',
                            styles: {},
                            icon: 'Edit',
                            callback: (data) => {
                                this.$prompt('请输入排序', '排序', {
                                    inputType: 'number',
                                    confirmButtonText: '修改',
                                    cancelButtonText: '取消'
                                }).then(({value}) => {
                                    this.$api.message('修改成功')
                                    data.sort = value
                                })
                            }
                        },
                    ]
                }
            ],
            data: {
                total: 1000,
                list: [],
                page: 1,
                size: 40
            },
            visible: false,
            form: {},
            locationTree: [],
            checkDialog: false,
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.$api.apiQuery('/api/platform/shop-type/', {
                page: 1, size: 100,
                direction: 'DESC',
                properties: ['id']
            }).then(res => {
                this.typeList = res.data.map(e => {
                    return {
                        label: e.name,
                        value: e.id
                    }
                });
            })
            this.$api.get('/api/platform/system/location/tree').then(res => {
                this.locationTree = res.data;
            })
        },
        onload(data) {
            console.log('加载新数据', data)
            this.data.page = data.page;
            this.data.size = data.size;
            Object.assign(data, {
                direction: 'DESC',
                properties: ['id']
            })
            this.$api.apiQuery('/api/platform/shop/', data).then(res => {
                this.data.list = res.data;
                this.data.total = res.total;
            })
        },
        handlerSubmit() {
            if (this.form.addIds && this.form.addIds.length >= 2) {
                this.form.stateId = this.form.addIds[0]
                this.form.cityId = this.form.addIds[1]
                if (this.form.addIds.length >= 2)
                    this.form.districtId = this.form.addIds[2]
            }
            this.$api.apiPost('/api/platform/shop/', this.form).then(() => {
                this.onload(this.data)
                this.visible = false;
            })
        },
        handlerDelete(data) {
            this.$api.apiDelete('/api/platform/shop/', data.id).then(() => {
                this.onload(this.data)
            })
        },
        handlerCheckShop(data) {
            this.form = data;
            this.checkDialog = true
        },
        handlerSubmitCheck() {
            this.$api.post('/api/platform/shop/check', {}, {
                id: this.form.id,
                status: this.form.status,
                remark: this.form.remark
            }).then(() => {
                this.checkDialog = false;
                // this.onload(this.data)
            })
        }
    }
}
</script>